Problem

Manual DOM editing is still incubating on next, but the lower-risk inspector and panel polish should be available on main without shipping canvas movement yet.

What this fixes

• Adds an Inspector header action that opens the right panel directly into a new Design tab.
• Wires the existing picker/property panel into Studio so selected elements can be inspected and edited through the right panel.
• Keeps Renders as a sibling tab in the same right panel instead of the only right-panel mode.
• Updates the left sidebar tabs to the newer segmented control styling.
• Removes Paper.Design references from the Remotion comparison docs.

Root cause

main already had the lightweight picker hook and PropertyPanel, but Studio only exposed the right panel as the render queue. The manual editing branch also includes canvas movement and deeper DOM-edit overlay work, so bringing the whole branch to main would roll out more than we want for this launch.

Verification

Local checks

• bun install
• bun run --filter @hyperframes/studio typecheck
• bunx oxlint packages/studio/src/App.tsx packages/studio/src/components/sidebar/LeftSidebar.tsx
• bunx oxfmt --check packages/studio/src/App.tsx packages/studio/src/components/sidebar/LeftSidebar.tsx
• rg -n "Paper\\.Design|paper\\.design|\\bPaper\\b" docs packages/studio packages/core packages/cli README.md --glob '!node_modules/**' returned no matches
• bun run --filter @hyperframes/studio build
• Pre-commit hook passed lint, format, and repo typecheck after bun run build:hyperframes-runtime generated the ignored runtime inline module needed in a clean worktree.

Browser verification

• Ran Studio at http://127.0.0.1:5177/#project/inspector-demo with a local ignored fixture.
• Verified the new left segmented tabs render for Code, Compositions, and Assets.
• Opened Inspector, confirmed the right panel shows Design and Renders tabs.
• Enabled picker mode and selected #headline through the runtime picker API after the browser mouse route did not deliver iframe clicks reliably.
• Verified the Design panel populated position, typography, colors, appearance, timing, and text fields.
• Edited the selected element's left value from the Design panel and verified the iframe computed style updated to 180px and the backing HTML received an inline style patch.
• Screenshots: qa-artifacts/studio-inspector/design-empty.png, qa-artifacts/studio-inspector/design-selected.png, qa-artifacts/studio-inspector/design-edited.png
• Recording: qa-artifacts/studio-inspector/inspector-flow.webm

Notes

This intentionally does not port DomEditOverlay, canvas drag/move, layout detach, or the broader manual editing surface from next. The local browser fixture and QA artifacts are untracked and not part of the PR.